<!-- 合同-基础设置-合同类型及模板-新增合同类型 -->
<template>
  <a-drawer
    width="40%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    draggable
    title-align="center"
    unmountOnClose
  >
    <template #title>
      {{ props.data?.id ? '编辑合同类型' : '新增合同类型' }}
    </template>
    <div>
      <a-form
        :model="formData.data"
        ref="refForm"
        :rules="rules"
        auto-label-width
      >
        <section>
          <h3 class="font-bold text-lg">基本信息</h3>
          <a-divider />
          <a-form-item label="合同分组" field="groupId" show-colon>
            <a-select v-model="formData.data.groupId" style="width: 250px">
              <a-option
                v-for="item in groupList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              />
            </a-select>
          </a-form-item>
          <a-form-item label="模板名称" field="name" show-colon>
            <a-input
              v-model="formData.data.name"
              style="width: 250px"
            ></a-input>
          </a-form-item>
          <a-form-item label="是否启用" field="enable" show-colon>
            <a-switch
              v-model="formData.data.enable"
              :checked-value="1"
              :unchecked-value="2"
            ></a-switch>
          </a-form-item>
          <a-form-item label="备注" field="remark" show-colon>
            <a-textarea
              v-model="formData.data.remark"
              show-word-limit
              :max-length="50"
              :auto-size="{
                minRows: 4
              }"
            ></a-textarea>
          </a-form-item>
        </section>
        <section>
          <h3 class="font-bold text-lg">签署方式</h3>
          <a-divider />
          <span>选择该合同类型需要签署的方式</span>
          <a-form-item field="way" hide-label show-colon>
            <a-radio-group direction="vertical" v-model="formData.data.way">
              <a-radio :value="1">企业-员工双方签署</a-radio>
              <a-radio :value="2">员工单方签署</a-radio>
              <a-radio :value="3">企业单方签署</a-radio>
            </a-radio-group>
          </a-form-item>
        </section>
        <section>
          <h3 class="font-bold text-lg">合同编号生成</h3>
          <a-divider />
          <span>选择后发起合同签署时将自动生成合同编号</span>
          <a-form-item hide-label field="" show-colon>
            <a-switch
              v-model="formData.data.isNum"
              :checked-value="1"
              :unchecked-value="2"
            />
          </a-form-item>
          <div v-show="formData.data.isNum === 1">
            <a-form-item label="编号规则" field="" show-colon>
              <a-select style="width: 250px" v-model="formData.data.numRule">
                <a-option label="固定编码+数字" :value="2" />
                <a-option label="固定编码+员工工号" :value="3" />
                <a-option label="固定编码+发起日期+数字" :value="4" />
                <a-option label="固定编码+发起日期+员工工号" :value="5" />
              </a-select>
            </a-form-item>
            <a-form-item label="固定编码" field="" show-colon>
              <a-input style="width: 250px" v-model="formData.data.num" />
            </a-form-item>
            <a-form-item label="数字位数" field="" show-colon>
              <a-select style="width: 250px" v-model="formData.data.digit">
                <a-option label="1位" :value="1" />
                <a-option label="2位" :value="2" />
                <a-option label="3位" :value="3" />
                <a-option label="4位" :value="4" />
                <a-option label="5位" :value="5" />
                <a-option label="6位" :value="6" />
              </a-select>
            </a-form-item>
            <a-form-item label="最新未用编号" field="" show-colon>
              <a-input
                style="width: 250px"
                placeholder="系统自动生成"
                disabled
              />
            </a-form-item>
            <!-- <a-button type="outline">保存</a-button> -->
          </div>
        </section>
        <section>
          <h3 class="font-bold text-lg">员工签署有效期</h3>
          <a-divider />
          <span
            >发起签署后，员工签署方如为在设定有效时间内签订，则该次合同签订将自动作废</span
          >
          <a-form-item hide-label field="" show-colon>
            <a-select v-model="formData.data.period">
              <a-option label="长期有效" />
              <a-option label="1天" />
              <a-option label="2天" />
              <a-option label="3天" />
              <a-option label="4天" />
              <a-option label="5天" />
              <a-option label="6天" />
              <a-option label="7天" />
              <a-option label="15天" />
              <a-option label="30天" />
            </a-select>
          </a-form-item>
        </section>
      </a-form>
      <!-- <CountSetting v-model:visible="countSettingVisiable"></CountSetting> -->
    </div>
    <template #footer>
      <a-space>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确认</a-button>
        <a-button type="primary" v-if="!formData.data.id" @click="continueAdd"
          >确认并继续新增</a-button
        >
      </a-space>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
import {
  GetContractGroup,
  AddContractGroupType,
  CheckContractGroupType
} from '@/apis/management/contract/baseSetting';
import { cloneDeep } from 'lodash';
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    data: any; // 传进来的数据,
  }>(),
  {}
);

const emits = defineEmits(['update:visible', 'typeEmit']);
let refForm = ref();

const formData = reactive<any>({
  data: {
    name: '', // 合同类型名称
    groupId: undefined, // 合同分组
    enable: 1, // 是否启用
    remark: '', // 备注
    way: undefined, // 合同类型签署方式 1 企业-员工双方签署 2 员工单方签署 3 企业单方签署,
    isNum: 2, // 是否合同编号生成,
    numRule: 2, //1 合同编号生成关闭（后端定义的）  2 固定编码+数字 3 固定编码+员工工号 4 固定编码+发起日期+数字 5 固定编码+发起日期+员工工号
    num: '', // 固定编码
    digit: undefined, // 数字位数
    period: '' // 合同有效期
  }
});

const orginData = cloneDeep(formData.data);

// 名称查重函数
const validateName = async (name: string, cb: any) => {
  try {
    if (name === props.data?.name && props.data?.id) {
      //
    } else {
      const data = {
        type: formData.data.groupId,
        name
      };
      const res = await CheckContractGroupType(data);
      if (res.code) {
        cb(`${res.msg}`);
      }
    }
  } catch (error: unknown) {
    console.log(error);
  }
};

const rules = {
  name: [
    {
      required: true,
      message: '请输入'
    },
    {
      validator: validateName
    }
  ],
  groupId: [
    {
      required: true,
      message: '请输入'
    }
  ],
  enable: [
    {
      required: true,
      message: '请输入'
    }
  ]
};

let groupList = ref([]); // 储存分组数据
const getData = async () => {
  try {
    const { content } = await GetContractGroup({
      pageNumber: 0,
      pageSize: -1
    });
    groupList.value = content;
  } catch (error: unknown) {
    console.log(error);
  }
};

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      if (props.data?.id) {
        formData.data = cloneDeep(props.data);
        formData.data.isNum = formData.data.numRule !== 1 ? 1 : 2;
      } else {
        formData.data = cloneDeep(orginData);
      }
    }
    getData();
  }
);

const handleOk = async () => {
  if (await refForm.value.validate()) {
    return;
  }
  if (formData.data.isNum == 2) {
    formData.data.numRule = 1;
    formData.data.num = '';
    formData.data.digit = undefined;
  }
  emits('typeEmit', formData.data);
  emits('update:visible', false);
};

const handleCancel = () => {
  emits('typeEmit', null);
  emits('update:visible', false);
};

const continueAdd = async () => {
  try {
    if (await refForm.value.validate()) {
      return;
    }
    if (formData.data.isNum == 2) {
      formData.data.numRule = 1;
      formData.data.num = '';
      formData.data.digit = undefined;
    }
    await AddContractGroupType(formData.data);
    emits('typeEmit', 'continue');
    formData.data = cloneDeep(orginData);
  } catch (error: unknown) {
    console.log(error);
  }
};
</script>

<style scoped lang="less"></style>
